<template>
	<view class="user-grade">
		<view class="head">
			<view class="user-card mb20">
				<view class="user-info acea-row row-between">
					<view class="acea-row row-center-wrapper">
						<view class="avatar acea-row row-center-wrapper">
							<image :src="userlevel.avatar"
								v-if="userlevel.avatar && userlevel.avatar !=urlDomain+'crmebimage/presets/morenT.png'"></image>
							<image v-else class="avatar" :src="urlDomain+'crmebimage/presets/morenT.png'"></image>
						</view>
						<view class="info">
							<view class="name">
								{{userlevel.nickname}}
							</view>
						</view>
						<view class="grade">
							<image class="image" :src="(userlevel.icon) ? userlevel.icon : '' " alt="">
						</view>

					</view>
					<view @click="goMultiple" class="rule acea-row row-center-wrapper">
						<text class="iconfont wenhao mr10">?</text>
						<view>规则说明</view>
					</view>
				</view>
			</view>
			<view v-if="next_level" class="card-wrapper" :style="'background-image: url('+userlevel.backImage+')'">
				<view class="usericon">
					<image :src="userlevel.icon"></image>
				</view>
				<view class="growth">
					<view class="title" :style="'color: '+userlevel.backColor">{{userlevel.userLevelName}}</view>
					<view class="info" :style="'color: '+userlevel.backColor">今日获得经验值{{userlevel.todayExp}}点</view>
				</view>
				<view class="wait">
					<view class="wait_count acea-row row-between-wrapper">
						<text class="value" :style="'color: '+userlevel.backColor">{{userlevel.experience}} <text
								class="upExperience">/{{userlevel.upExperience}}</text></text>
						<text v-if="userlevel.upExperience>0" class="text"
							:style="'color: '+userlevel.backColor">距{{userlevel.nextLevelName}}还需{{userlevel.upExperience>0 && userlevel.experience>=0 &&userlevel.upExperience>userlevel.experience ? userlevel.upExperience-userlevel.experience : 0 }}

						</text>
					</view>
					<view class="progress"><text class="current_value" :style="'width:'+curPercent+'%'"></text></view>
				</view>
			</view>
		</view>
		<view class="ml-20 mr-20">
			<view class="grade_main">
				<view v-if="gradeList.length > 0" class="grade_privilege">
					<view class="title">会员可专项优质特权</view>
					<view class="grade_list acea-row row-between-wrapper">
						<view v-for="(item,index) in gradeList" class="item acea-row">
							<view class="picture" :class="item.status == 0 ? 'isLocked' : ''">
								<image class="bg_image" :src="item.pic"></image>
							</view>
							<view class="desc">
								<view class="name line1">{{item.name}}</view>
								<view class="detail line1">{{item.info}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="upgrade">
					<view class="upgrade-main">
						<view class="acea-row row-between mb-36">
							<view class="title">获取经验</view>
							<navigator hover-class='none' url='/pages/goods/exp_record/index'>
								<view class="rule acea-row row-center-wrapper">经验明细<text
										class="iconfont icon-jinru2"></text></view>
							</navigator>
						</view>
						<view class="item acea-row row-between-wrapper ">
							<view class="flex-center">
								<image class="w-100 h-100" :src="urlDomain+'crmebimage/presets/qiandaotu.png'"></image>
								<view class="ml-24">
									<view class="name">
										签到
									</view>
									<view class="text">每日签到可获得经验值</view>
								</view>
							</view>
							<view v-if="userlevel.todaySign" class="get_btn">已完成</view>
							<navigator v-else class="get_btn" hover-class='none' url='/pages/merchant/user_sgin/index'>去完成
							</navigator>
						</view>
						<view v-if="userlevel.isOpenCommunity" class="mt-44 item acea-row row-between-wrapper">
							<view class="flex-center">
								<image class="w-100 h-100" :src="urlDomain+'crmebimage/presets/zhongcaotu.png'"></image>
								<view class="ml-24">
									<view class="name">
										发布种草{{'（'+userlevel.noteNum+'/'+ userlevel.noteMaxNum + '）'}}
									</view>
									<view class="text">发布一条种草可获得经验值<text class="add">+{{userlevel.noteExp}}</text></view>
								</view>
							</view>
							<navigator class="get_btn" hover-class='none' url='/pages/discover/discover_release/index'>{{userlevel.noteNum == userlevel.noteMaxNum ? '已完成': '去完成'}}
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='hotList'>
			<!-- 推荐商品-->
			<recommend ref="recommendIndex" :isShowTitle="isShowTitle" @getRecommendLength="getRecommendLength"></recommend>
		</view>
		<view class="instructions" v-if="showProtocol">
			<view class="setAgCount">
				<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
				<div class="title">会员等级规则</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
		<view class="success" v-if="isShowbox">
			<view class="bg"></view>
			<view class="con">
				<view class="title">恭喜您升级为</view>
				<view class="upgrade">
					{{upgradeInfo.brokerage_name}}
				</view>

				<view class="level">
					<image class="imgae" :src="upgradeInfo.brokerage_icon"></image>
				</view>
				<view class="btn" @click="close">查看我的权益</view>
				<view class='iconfont icon-guanbi3' @click="close"></view>
			</view>
		</view>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		myExpApi,
		memberInfo,
		brokerageNotice
	} from '@/api/user.js';
	import recommend from "@/components/base/recommend.vue";
	import {
		mapGetters
	} from "vuex";
	import {
		configMap
	} from '@/utils';
	import parser from "../components/jyf-parser/jyf-parser";
	export default {
		computed: mapGetters(['userInfo', 'isLogin']),
		components: {
			recommend,
			"jyf-parser": parser,
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				isShowTitle: true,
				userlevel: {},
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				protocol: '',
				showProtocol: false,
				tagStyle: {
					img: 'width:100%;display:block;',
					video: 'width:100%;'
				},
				gradeList: [],
				hostProduct: [],
				hotScroll: false,
				hotPage: 1,
				hotLimit: 10,
				isShowbox: false,
				curLevel: {},
				next_level: {},
				growthValue: '',
				brokerage_bg: '',
				experience: '',
				curPercent: 0,
				valueList: {},
				upgradeInfo: {}
			};
		},
		onShow() {
			if (this.isLogin) {
				this.getMemberInfo();
			} else {
				toLogin();
			}
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		onReachBottom() {
			this.$refs.recommendIndex.get_host_product();
		},
		methods: {
			goMultiple(e) {
				uni.navigateTo({
					url: '/pages/goods/level_rule/index'
				})
			},
			getRecommendLength(e) {
				this.isNoCommodity = e == 0 ? true : false;
			},
			shareIntegral() {
				uni.setStorageSync('isIntegral', true)
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			/*升级提醒*/
			upgradeRemind() {
				let that = this;
				brokerageNotice({
					type: 1
				}).then(function(res) {
					that.isShowbox = true;
					that.upgradeInfo = res.data.level;
				}).catch(res => {
					that.isShowbox = false;
				});
			},
			// 获取会员信息
			getMemberInfo() {
				let that = this;
				myExpApi().then(res => {
					this.userlevel = res.data;
					let check1 = this.userlevel.upExperience > 0 ; //下级经验
					let check2 = this.userlevel.experience >= 0 ; //当前经验
					let check3 = Number(this.userlevel.upExperience) > Number(this.userlevel.experience);
					this.curPercent = (check1 && check2 && check3) ? ((this.userlevel
						.experience / this.userlevel.upExperience) * 100).toFixed(2) : 100; //经验进度条

				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/index',
						});
					}, 500)
				})
			},
			// 弹窗关闭
			close() {
				this.isShowbox = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.icon-jinru2 {
		margin-left: 6rpx;
		font-size: 16rpx;
	}

	.growth {
		padding-top: 55rpx;
	}

	.usericon {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		display: inline-block;
		right: 40rpx;
		top: -20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user-grade {

		.head {
			height: 446rpx;
			width: 100%;
			padding: 14rpx 45rpx 45rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #181818 0%, #505050 100%);

			.user-card {
				width: 100%;

				.user-info {
					z-index: 20;
					padding: 0 10rpx;

					.vip {
						width: 82rpx;
						height: 36rpx;
						margin-left: 12rpx;

						image {
							width: 82rpx;
							height: 36rpx;
						}
					}

					.rule {
						color: #999999;
						font-size: 24rpx;
						top: 50%;
						right: 40rpx;

						.wenhao {
							width: 22rpx;
							height: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 22rpx;
							border-radius: 50%;
							background-color: #AAAAAA;
							color: #181818;
							margin-left: 4rpx;
						}
					}

					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: rgba(255, 255, 255, 0.6);

						image {
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
							margin: auto;
						}
					}

					.info {
						margin-left: 20rpx;
						padding: 15rpx 0;

						.name {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 31rpx;

							.vip {
								display: flex;
								align-items: center;
								height: 36rpx;
								padding: 0 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}

					.grade {
						width: 22rpx;
						height: 22rpx;
						margin-left: 10rpx;

						.image,
						uni-image {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
				}
			}
		}

		.card-wrapper {
			background-size: cover;
			width: 656rpx;
			height: 300rpx;
			margin: 0 auto;
			position: relative;
			padding: 0 40rpx 42rpx;
			box-sizing: border-box;
			border-radius: 22rpx 22rpx 0px 0px;

			.title {
				font-size: 40rpx;
				font-weight: 600;
			}

			.info {
				font-size: 26rpx;
				margin-top: 12rpx;
				opacity: .5;
			}

			.wait {
				margin-top: 36rpx;

				.wait_count {
					.upExperience {
						opacity: .7;
						font-size: 24rpx !important;
					}

					.text {
						opacity: .7;
						font-size: 24rpx;
					}

					.value {
						// color: #282828;
						// opacity: .7;
						font-weight: bold;
						font-size: 34rpx;
						margin-right: 6rpx;
					}

					.iconfont {
						font-size: 14rpx;
						color: #333333;
						display: inline-block;
						margin-left: 4rpx;
					}
				}

				.progress {
					width: 100%;
					height: 8rpx;
					margin-top: 10rpx;
					position: relative;

					&::after {
						content: "";
						display: inline-block;
						width: 100%;
						height: 8rpx;
						background-color: #333;
						border-radius: 13rpx;
						opacity: .3;
						position: absolute;
						top: 0;
						left: 0;
					}

					.current_value {
						display: inline-block;
						width: 240rpx;
						height: 8rpx;
						background-color: #333;
						border-radius: 13rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 5;
					}
				}
			}

			.brokerage_icon {
				width: 177rpx;
				height: 212rpx;
				position: absolute;
				right: 60rpx;
				top: 0;
			}
		}

		.grade_main {
			text-align: center;
			padding: 38rpx 32rpx 32rpx 32rpx;
			border-radius: 24rpx;
			position: relative;
			top: -56rpx;
			background: #fff;

			&::before {
				content: "";
				display: inline-block;
				width: 26rpx;
				height: 26rpx;
				background: #ffffff;
				transform: rotate(45deg);
				position: absolute;
				top: -10rpx;
				box-shadow: -1rpx -1rpx 1rpx rgba(0, 0, 0, 0.05);
			}

			.grade_privilege {
				.title {
					display: inline-block;
					color: #786046;
					font-size: 32rpx;
					font-weight: bold;
					padding: 44rpx 54rpx 20rpx;
					background: url('');
					background-size: 100%;
				}

				.grade_list {
					.item {
						width: 330rpx;
						height: 135rpx;
						box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
						background: #ffffff;
						border-radius: 10rpx;
						padding: 25rpx 25rpx;
						margin-top: 24rpx;

						.picture {
							width: 80rpx;
							height: 80rpx;
							border-radius: 100%;
							position: relative;
							background-color: #FAF1E4;

							image,
							uni-image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 100%;
							}

							&.isLocked {
								background-color: #E8E8E8;

								image,
								uni-image {
									filter: grayscale(100%);
									filter: gray;
									opacity: .5;
								}
							}

							.suozi {
								width: 26rpx;
								height: 26rpx;
								position: absolute;
								bottom: 0;
								right: 0;

								.image,
								uni-image,
								image {
									width: 26rpx;
									height: 26rpx;
									filter: none;
									opacity: 1;
								}
							}
						}

						.desc {
							margin-left: 20rpx;
							text-align: left;

							.name {
								max-width: 180rpx;
								font-size: 32rpx;
								color: #282828;
							}

							.detail {
								font-size: 24rpx;
								color: #666666;
								max-width: 180rpx;
								margin-top: 6rpx;
							}
						}
					}
				}
			}

			.upgrade {
				text-align: left;

				.rule {
					color: #666666;
					font-size: 26rpx;
				}

				.title {
					font-size: 34rpx;
					color: #282828;
					font-weight: bold;

					.name {
						margin: 0 19rpx;
					}

					image {
						width: 119rpx;
						height: 15rpx;

						&.right {
							transform: rotate(180deg);
						}
					}
				}

				.upgrade-svip {
					margin: 40rpx 0;
					background: #FFF7EC;
					border-radius: 35rpx;
					padding: 16rpx 20rpx;
					font-size: 24rpx;
					justify-content: space-between;

					.svip-view {
						color: #AE6908;
						align-items: center;
						justify-content: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 6rpx;
						}
					}

					.svip-btn {
						color: #B37400;
						font-size: 22rpx;

						.icon-jinru2 {
							margin-left: 6rpx;
							font-size: 16rpx;
						}
					}
				}

				.item {
					position: relative;
				}

				.name {
					font-size: 30rpx;
					color: #282828;
					font-weight: 600;
				}

				.text {
					font-size: 24rpx;
					color: #999999;
					margin-top: 6rpx;

					.add {
						color: #DFA759;
						display: inline-block;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}

				.get_btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 136rpx;
					text-align: center;
					height: 58rpx;
					color: #AE6908;
					font-size: 26rpx;
					background: linear-gradient( 90deg, #FFEAB5 0%, #E7B667 100%);
					border-radius: 29rpx;
				}
			}
		}
	}

	.success {
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		text-align: center;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, #181818 0%, #505050 100%);
		}

		.level {
			width: 222rpx;
			height: 203rpx;
			margin: 20rpx auto 0;

			uni-image,
			image {
				width: 222rpx;
				height: 203rpx;
			}
		}

		.title {
			color: #CD8D33;
			font-weight: bold;
			font-size: 36rpx;
			margin: 0 auto;
			display: inline-block;
			font-size: 26rpx;
			width: 285rpx;
			margin-top: 96rpx;
			position: relative;

			&:before,
			&:after {
				content: "";
				display: block;
				width: 52rpx;
				height: 10rpx;
				position: absolute;
				/* #ifdef MP || APP-PLUS */
				top: 9rpx;
				/* #endif */
				/* #ifdef H5 */
				top: 14rpx;
				/* #endif */
				background-image: url('');
				background-size: cover;
			}

			&:before {
				/* #ifdef MP || APP-PLUS */
				left: 0;
				/* #endif */
				/* #ifdef H5 */
				left: 0;
				/* #endif */

			}

			&:after {
				/* #ifdef MP || APP-PLUS */
				right: 0;
				/* #endif */
				/* #ifdef H5 */
				right: 0;
				/* #endif */
				transform: rotateY(180deg);
			}
		}

		.upgrade {
			font-size: 60rpx;
			text-align: ceter;
			color: #CC6C34;
			text-align: center;
			width: 100%;
			font-weight: bold;
			margin-top: 10rpx;
			font-family: 'Tahoma, Geneva, Verdana, sans-serif';
		}

		.con {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 557rpx;
			height: 660rpx;
			background-image: url('');
			background-size: cover;

			.btn {
				position: absolute;
				width: 380rpx;
				height: 70rpx;
				left: 50%;
				margin-left: -185rpx;
				bottom: 77rpx;
				line-height: 70rpx;
				text-align: center;
				color: #9A5D08;
				background: linear-gradient(90deg, #EBBD7B 0%, #FFDDAC 100%);
				border-radius: 35rpx;
				font-size: 28rpx;
			}

			.icon-guanbi3 {
				color: #ffffff;
				font-size: 70rpx;
				position: absolute;
				bottom: -80rpx;
				left: 240rpx;
			}
		}
	}

	.instructions {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}

	.instructions .setAgCount {
		background: #fff;
		width: 656rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;

		.content {
			height: 900rpx;
			overflow-y: scroll;

			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}

			/deep/ img {
				max-width: 100%;
			}
		}
	}

	.instructions .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}

	.instructions .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	.instructions .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
</style>